<template>
  <div>
    <el-collapse-transition>
      <div v-show="btnGroup.search" class="main-box search-box">
        <el-form
          class="troila-form"
          ref="searchInfo"
          :model="searchObj"
          :inline="true"
          label-width="100px"
        >
          <el-form-item
            label="菜单名称"
            prop="menuName"
            class="troila-select-inline"
          >
            <el-input
              v-setwidth
              placeholder="请输入菜单名称"
              v-model="searchObj.menuName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            label="菜单状态"
            prop="menuStatus"
            class="troila-select-inline"
          >
            <el-select
              v-setwidth
              placeholder="请选择菜单状态"
              v-model="searchObj.menuStatus"
              clearable
              popper-class="troila-popper"
            >
              <el-option
                v-for="(item, index) in menuList"
                :key="index"
                :label="item.dictName"
                :value="item.dictCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="searchBtn">
            <el-button class="cancelBtn" @click="resetForm">重置</el-button>
            <el-button type="primary" @click="submitSearch">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
    <div class="troila-group">
      <select-group
        v-model="btnGroup"
        :row="allTitle"
        :row-choose="chooseTitle"
        @rowChange="
          (arr) => {
            chooseTitle = arr
          }
        "
        @refresh="getList"
      />
    </div>
    <div class="main-box table-box">
      <div class="table-box-title ClearFloat">
        <i class="title-font">查询结果</i>
        <div class="troila-form">
          <el-button
            type="primary"
            v-limit="`system:menuManage:add`"
            @click="btnClick('add')"
            >新增</el-button
          >
          <el-button type="primary" @click="btnClick('fold')" v-if="showStatus"
            >展开/折叠</el-button
          >
        </div>
      </div>
      <unit-table
        v-if="!btnGroup.card"
        row-key="id"
        children="children"
        :treeFold="treeFold"
        :loading="loading"
        :title="tableTitle"
        :data="tableData"
        :opera="4"
        :operation="tableOperation"
        :dictionary="dictionary"
        @return="tableReturn"
      />
      <pagination
        v-show="pager.total > pager.size"
        :pager="pager"
        @query="getList"
        ref="Pagerpagination"
      ></pagination>
    </div>
    <dialog-form v-model="showForm" :menus="tableData_" @change="getList" />
  </div>
</template>
<script>
import dialogForm from './dialog/menuForm'
export default {
  name: 'menuManage',
  components: {
    dialogForm,
  },
  data() {
    return {
      searchObj: {
        menuName: '',
        menuStatus: '',
      }, //搜索参数
      searchRes: {}, //搜索储存值
      loading: false,
      showStatus: true,
      time: null, //时间组件值
      btnGroup: {
        //按钮组
        search: true,
        refresh: false,
      },
      pager: {
        // 页码
        total: 0,
        page: 1, //当前第几页
        size: 10, //每页显示的条数
      },
      dictionary: {
        // 字典信息
        menuKind: [
          { dictName: '目录', dictCode: 0 },
          { dictName: '菜单', dictCode: 1 },
          { dictName: '按钮', dictCode: 2 },
        ],
        // menuStatus: [
        //   { dictName: '停用', dictCode: 0 },
        //   { dictName: '启用', dictCode: 1 },
        // ],
      },
      allTitle: [
        // 全部可显示表头
        {
          label: '菜单名称', //*表头名称
          code: 'menuName', //*对应数据项
          tooltip: true, //超出显示浮层
          sort: false, //是否显示排序
          width: 110, //最小宽
        },
        {
          label: '路由地址',
          code: 'menuAddr',
          tooltip: true,
          width: 110,
        },
        {
          label: '菜单图标',
          code: 'menuIcon',
          tooltip: true,
          width: 110,
        },
        {
          label: '权限标识',
          code: 'menuCode',
          tooltip: true,
          width: 110,
        },
        {
          label: '菜单类型',
          code: 'menuKind',
          dict: 'menuKind', //需要查询字典对应的key
          width: 60,
        },
        {
          label: '显示顺序',
          code: 'menuSort',
          sort: true,
          width: 60,
        },
        {
          label: '菜单状态',
          code: 'menuStatus',
          dict: 'menuStatus',
          style: {
            //该项style
            color: { value: '#FF4A4A', result: 0 },
          },
          width: 60,
        },
        {
          label: '创建时间',
          code: 'createTime',
          tooltip: true,
          sort: true,
          width: 110,
          format: (item, key) => {
            return this.toTime(item[key])
          },
        },
        {
          label: '创建人',
          code: 'createBy',
          tooltip: true,
          sort: true,
        },
        {
          label: '修改时间',
          code: 'updateTime',
          tooltip: true,
          sort: true,
          width: 110,
          format: (item, key) => {
            return this.toTime(item[key])
          },
        },
        {
          label: '修改人',
          code: 'updateBy',
          tooltip: true,
          sort: true,
        },
      ],
      chooseTitle: [
        //被选中显示表头
        'menuName',
        'menuAddr',
        'menuCode',
        'menuKind',
        'menuSort',
        'menuStatus',
      ],
      tableData: [],
      tableData_: [],
      tableOperation: [
        //表格操作
        // *code 对应图标, label 对应浮层显示文字, show 判断是否显示, color 图标颜色
        {
          code: 'add',
          label: '添加子菜单',
          limit: 'system:menuManage:add',
          disabled: (item) => {
            return item.menuKind == 2
          },
        },
        { code: 'edit', limit: 'system:menuManage:edit' },
        {
          code: 'start',
          label: '启用',
          limit: 'system:menuManage:start',
          show: (row) => {
            return row.menuStatus == 0
          },
        },
        {
          code: 'stop',
          label: '停用',
          limit: 'system:menuManage:stop',
          color: '#D13633',
          show: (row) => {
            return row.menuStatus == 1
          },
        },
        { code: 'delete', limit: 'system:menuManage:delete', color: '#D13633' },
      ],
      treeFold: true, //展开收起
      showForm: false, //弹窗显示-新建修改
    }
  },
  computed: {
    tableTitle() {
      //表格表头
      return this.allTitle.filter(
        (item) => this.chooseTitle.indexOf(item.code) > -1
      )
    },
    menuList() {
      let list = this.$store.state.dictionary.menu_status
      if (!list) {
        this.$store.dispatch('dictionary/getDict', 'menu_status')
      }
      this.dictionary.menuStatus = list

      let list1 = this.$store.state.dictionary.menu_kind
      if (!list1) {
        this.$store.dispatch('dictionary/getDict', 'menu_kind')
      }
      this.dictionary.dictType = list1
      return list ? list : []
    },
  },
  watch: {
    showForm(v) {
      v ? null : this.getTree()
    },
  },
  methods: {
    // 获取树
    getTree() {
      this.API.menuManage
        .pageList({
          pageNum: 1,
          pageSize: 99999,
        })
        .then((res) => {
          if (res.data) {
            this.tableData_ = res.data.records || []
          }
          // console.log(this.tableData)
        })
        .catch((err) => {})
    },
    // 获取列表
    getList() {
      let param = {
        pageNum: this.pager.page,
        pageSize: this.pager.size,
        ...this.searchRes,
      }
      if (!param.menuName && !param.menuStatus) {
        delete param.menuName
        delete param.menuStatus
        param.selectFuc = 'false'
      } else {
        param.selectFuc = 'true'
      }
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.showStatus = param.selectFuc === 'true' ? false : true
        this.pager.total = 4
        this.tableData =
          param.selectFuc === 'true'
            ? [{}, {}, {}, {}]
            : [
                { id: 1, children: [{ id: 11 }, { id: 12 }] },
                { id: 2, children: [{ id: 21 }, { id: 22 }] },
                { id: 3, children: [{ id: 31 }, { id: 32 }] },
                { id: 4, children: [{ id: 41 }, { id: 42 }] },
              ]
      }, 100)
      return
      this.API.menuManage
        .pageList(param)
        .then((res) => {
          this.loading = false
          if (res.data) {
            this.tableData = res.data.records || []
            this.pager.total = res.data.total
            this.showStatus = param.selectFuc === 'true' ? false : true
          }
          // console.log(this.tableData)
        })
        .catch((err) => {
          this.loading = false
        })
    },
    // 日期控件操作
    changeDate() {
      // console.log(this.time)
    },
    // 重置
    resetForm() {
      this.$refs.searchInfo.resetFields()
      this.searchRes = {}
      this.pager.page = 1
      this.getList()
    },
    // 搜索
    submitSearch() {
      this.searchRes = { ...this.searchObj }
      this.pager.page = 1
      this.getList()
    },
    // 按钮操作
    btnClick(method) {
      // console.log(method)
      switch (method) {
        case 'add':
          this.showForm = { method }
          break
        case 'fold':
          this.treeFold = !this.treeFold
          break
      }
    },
    // 表格操作
    tableReturn(method, { row, prop, order, selection }) {
      // console.log(method, row, prop, order, selection)
      let text = '',
        api = '',
        param = {}
      switch (method) {
        case 'add':
          this.showForm = { parentId: row.id, method, parentKind: row.menuKind }
          return
        case 'edit':
          this.showForm = { ...row, parentId: row.parentId, method }
          return
        case 'start':
          text = '启用'
          api = 'updateState'
          param = {
            ids: row.id,
            status: 1,
          }
          break
        case 'stop':
          text = '停用'
          api = 'updateState'
          param = {
            ids: this.recursion(row).join(','),
            status: 0,
          }
          break
        case 'delete':
          text = '删除'
          api = 'removeMenu'
          param = {
            ids: this.recursion(row).join(','), //{ id: 'id', children: 'children' }
          }
          break
        default:
          return
      }
      this.$confirmFn(
        `您确定要${
          text + this.getdictName(row.menuKind, this.dictionary.menuKind)
        }<span class='light'>${row.menuName}</span>${
          method == 'start' || !row.children || row.children.length == 0
            ? ''
            : '及其子菜单'
        }吗？`,
        '提示',
        {
          callback: (action, instance) => {
            if (action == 'cancel ') {
              return
            } else if (action == 'confirm') {
              // console.log(method, row)
              // console.log(api, this.API.menuManage[api])
              this.API.menuManage[api](param)
                .then((res) => {
                  this.ajaxIng = false
                  this.$alertFn.success(`${text}成功 ！`)
                  this.getList()
                })
                .catch((err) => {
                  this.ajaxIng = false
                  // this.$alertFn.error(`${text}失败 ！`)
                })
            }
          },
        }
      )
    },
  },
  mounted() {
    this.submitSearch()
    this.getTree()
  },
  destroyed() {},
}
</script>
<style scoped>
</style>
